<script  setup lang="ts">
import { ref, onMounted} from 'vue';
import { useUserStore } from "@/store";
import { useNotification} from "naive-ui";
import { Selector, Markdown} from '@/components/common'
import {payAttachFilter} from "@/api/entity/RequestParam";
import { useRouter } from 'vue-router';

import { getCallPaymentListAPI, isResultLogin} from '@/api';
import {getPageData} from "@/api/entity/ResultParam";
import { PAY_METHOD, PAY_CLIENT, TIME_SELECT, PAYMENT_STATUS} from '@/api/api';
import { getCastCurrentDate } from '@/utils/time/timeUtils';

const router = useRouter();                  // 路由跳转
const hint = useNotification()
const requestPayAttachParam = ref<payAttachFilter>({
  orderNo: '',
  status: null,
  channel: null,
  paymentEnv: '',
  payPlatform: '',
  count: 15,
  page: 0,
  sort: 0
})

const payAttachList = ref<getPageData>({
  pageList: [],
  currentPage: 0, pageCount: 0
})


const select_data = ref<number>(0);           // 第几行高亮
const isLoadPayAttach = ref<boolean>(false)   // 是否继续加载
function getPayAttachList() {
  if (!isLoadPayAttach.value) {
    isLoadPayAttach.value = true
    getCallPaymentListAPI(requestPayAttachParam.value).then(res => {
      isResultLogin(res.code, router)
      if (res.code === 200) {
        const resultData:getPageData = res.data
        if (Array.isArray(payAttachList.value.pageList) && Array.isArray(resultData.pageList)) {
          payAttachList.value.pageList = [...payAttachList.value.pageList, ...resultData.pageList];
        }
        payAttachList.value.pageCount = resultData.pageCount
        payAttachList.value.currentPage = resultData.currentPage
        if (payAttachList.value.currentPage === 0) {
          attachPay.value = payAttachList.value.pageList[0]
          select_data.value = 0
        }
        isLoadPayAttach.value = false
      }
    }).catch(error => {
      isLoadPayAttach.value = false
    })
  }
}

/**
 *  支付状态
 */
const handleSelectPaymentStatus = (newValue:string) => {
  const initPayAttach =  { pageList: [], currentPage: 0, pageCount: 0};
  payAttachList.value = initPayAttach
  if (newValue !== '-1') {
    requestPayAttachParam.value.status = newValue
  } else {
    requestPayAttachParam.value.status = null
  }
  requestPayAttachParam.value.page = 0
  getPayAttachList()
}
/**
 *  支付渠道
 */
const handleSelectPaymentChange = (newValue:string) => {
  const initPayAttach =  { pageList: [], currentPage: 0, pageCount: 0};
  payAttachList.value = initPayAttach
  if (newValue !== '0') {
    requestPayAttachParam.value.channel = newValue
  } else {
    requestPayAttachParam.value.channel = null
  }
  requestPayAttachParam.value.page = 0
  getPayAttachList()
}
/**
 * 订单号
 */
function handlerPayment() {
  const initPayAttach =  { pageList: [], currentPage: 0, pageCount: 0};
  payAttachList.value = initPayAttach
  requestPayAttachParam.value.page = 0
  getPayAttachList()
}
/**
 *  支付平台
 */
const handleSelectClientChange = (newValue:string) => {
  const initPayAttach =  { pageList: [], currentPage: 0, pageCount: 0};
  payAttachList.value = initPayAttach
  if (newValue !== 'not') {
    requestPayAttachParam.value.payPlatform = newValue
  } else {
    requestPayAttachParam.value.payPlatform = null
  }
  requestPayAttachParam.value.page = 0
  getPayAttachList()
}

const handleSelectTimeChange = (newValue:string) => {

}


// 组件挂载时，初始化高亮显示
onMounted(() => {
  getPayAttachList()
});

function loadMorePayAttachData(event) {
  const scrollTop = event.target.scrollTop + 1.6;
  if (scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
    requestPayAttachParam.value.page = payAttachList.value.currentPage + 1
    if (requestPayAttachParam.value.page < payAttachList.value.pageCount) {
      getPayAttachList()
    }
  }
}
/**
 * 查看具体数据详情
 * @param attach
 */
const attachPay = ref<paymentAttach | null>(null)
function handlePayAttachDetail(attach: paymentAttach, index: number) {
  attachPay.value = attach;
  select_data.value = index;
}

function getPaymentChannel(channel: number) {
    return PAY_METHOD[channel].text
}
function getPaymentStatus(status: number) {
  return PAYMENT_STATUS[status + 1].text;
}


const select_method = ref('0')
const select_client = ref('not')
const select_time = ref('0')
const select_pay_status = ref('-1')




</script>

<template>
  <div class="w-100 mt-10 mb-20">
    <div class="call-title w-40 mb-10 mx-auto fs-5">
      支付数据详情
    </div>

    <div class="row w-100">
      <div class="col-lg-4 mx-auto d-flex mt-3">
        <div class="col-7">
          <input
              v-model="requestPayAttachParam.orderNo"
              @keyup.enter="handlerPayment"
              class="input-material"
              placeholder="订单号"/>
        </div>
        <div class="col-4 pl-5">
          <Selector class="col-10"
                    :label="''"
                    @change="handleSelectPaymentStatus"
                    :options="PAYMENT_STATUS"
                    :value="select_pay_status" />
        </div>
      </div>

      <div class="col-lg-7 d-flex mt-3">

        <Selector class="col-4"
                  :label="''"
                  @change="handleSelectPaymentChange"
                  :options="PAY_METHOD"
                  :value="select_method" />

        <Selector class="col-4 ml-4"
                  :label="''"
                  @change="handleSelectClientChange"
                  :options="PAY_CLIENT"
                  :value="select_client" />

        <Selector class="col-2 ml-4"
                  :label="''"
                  @change="handleSelectTimeChange"
                  :options="TIME_SELECT"
                  :value="select_time" />
      </div>
    </div>

    <div class="row w-100 mx-auto">
      <div class="datatable-table ml-3 col-lg-7 mx-auto mt-5" @scroll="loadMorePayAttachData">
        <table class="table text-sm" id="datatable1" style="width: 100%;">
          <thead>
          <tr>
            <th>订单号</th>
            <th>渠道 / 状态</th>
            <th>金额</th>
            <th>时间</th>
          </tr>
          </thead>
          <tbody>
          <tr class="tr-lable"
              v-for="(attach, index) in payAttachList.pageList"
              :class="{'select_pay_detail': select_data === index}"
              @click="handlePayAttachDetail(attach, index)"
              :key="index" >
            <td class="td_lable">{{attach.orderNo}}</td>
            <td class="td_lable">
              <span class="fw-bold">{{getPaymentChannel(attach.channel)}} </span>
              <span style="color: #f38282"> / </span>
              <span class="fs-10">{{getPaymentStatus(attach.status)}}</span>
            </td>
            <td class="td_lable">{{attach.amount}}</td>
            <td class="td_lable">{{getCastCurrentDate(attach.requestTime)}}</td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="col-lg-4 mx-auto mt-5">
        <div class="card-info w-100 mb-3 d-flex pt-3">
          <p>支付队列消费</p>
          <p class="text-right-all">状态 - 成功</p>
          <p class="icon-more text-primary">最近消费时间:</p>
        </div>

        <div class="card-info w-100 mb-3 d-flex pt-3">
          <p>退款队列消费</p>
          <p class="text-right-all">状态 - 成功</p>
          <p class="icon-more text-primary">最近消费时间:</p>
        </div>

        <div class="card-info w-100 mb-3 d-flex pt-3">
          <p>API名称: </p>
          <p class="text-right-all"></p>
          <p class="icon-more text-primary">共调用3360次</p>
        </div>

        <div class="input-material-group">
          <p class="param_btn text-primary">参数解析</p>
          <Markdown :transform="attachPay" language="json"></Markdown>
        </div>



      </div>

    </div>
  </div>



</template>

<style scoped>

.card-info {
  position: relative;
  height: 3.5rem;
}
.icon-more {
  position: absolute;
  right: 0px;
}
.card-info:hover {
  color: red;
  transform: scale(0.99);
  cursor: pointer;
}
.call-title {
  color: #2f80ed;
}
.input-material {
  letter-spacing: 1px;
  border: none;
  outline: none;
  background: none;
  padding: .375rem 0;
  border-bottom: 1px solid #40444b;
  display: block;
  width: 100%;
}

.param_btn {
  position: absolute;
  top: -1.5rem;
  right: 0px;
}

.input-material-group {
  position: relative;
  width: 100%;
  height: 25rem;
}
.datatable-table {
  height: 40rem;
  overflow-y: auto;
  display: block;
  box-shadow: 0 0 1.5px #2F80ED;
  border-radius: 5px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 确保列宽一致 */
}

thead {
  width: 100%;
  height: 3.5rem;
  line-height: 3.5rem;
}

thead th {
  width: 100%;
  position: sticky; /* 启用粘性定位 */
  top: 0; /* 固定在顶部 */
  background-color: #fff; /* 确保thead在滚动时背景色不变 */
  z-index: 1; /* 确保thead在tbody上方 */
}
thead th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #2F80ED; /* 或者你想要的边框颜色 */
}

/* 滚动条整体样式 */
.datatable-table::-webkit-scrollbar {
  width: 10px; /* 滚动条的宽度 */
}
/* 滚动条滑块样式 */
.datatable-table::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* 滑块颜色 */
  border-radius: 10px; /* 滑块边角 */
}

/* 滚动条滑块悬停样式 */
.datatable-table::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5); /* 滑块悬停时的颜色 */
  border-radius: 10px; /* 滑块边角 */
}
/* 滚动条轨道样式 */
.datatable-table::-webkit-scrollbar-track {
  background-color: #2F80ED; /* 轨道颜色 */
  border-radius: 10px; /* 轨道边角 */
}

.tr-lable:hover {
  color: red;
  cursor: pointer;
  transform: scale(0.99);
}
.td_lable {
  height: 6rem;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.td_lable:hover {
  text-overflow: inherit;
  white-space: inherit;
}

</style>


